import {Image, ScrollView, StyleSheet, View, TouchableOpacity, RefreshControl} from "react-native";
import {NativeStackScreenProps} from "react-native-screens/native-stack";
import {MainStackParamList} from "../navigation/MainStack";
import {Avatar, Divider, Icon, Text} from "react-native-paper";
import {useCallback, useLayoutEffect, useState} from "react";
import {FeedbackList} from "../components/FeedbackList";

type props = NativeStackScreenProps<MainStackParamList, "AboutScreen">;
export const AboutScreen = ({navigation, route}: props) => {
    const [refresh, setRefresh] = useState(false);

    useLayoutEffect(() => {
        navigation.canGoBack();
    }, []);

    const onRefresh = useCallback(() => {
        setRefresh(true);
        console.log(route.params.feedback.comments);
        setTimeout(() => {
            setRefresh(false);
        }, 500)
    }, [])

    return (
        <ScrollView contentContainerStyle={style.container}
                    horizontal={false}
                    nestedScrollEnabled
                    refreshControl={<RefreshControl refreshing={refresh} onRefresh={onRefresh}/>}>
            <View style={{
                backgroundColor: "#FFF",
                justifyContent: "center",
                alignItems: "center",
                height: 200
            }}>
                <Image source={route.params.url}/>
            </View>
            <View style={style.title}>
                <View style={{
                    flexDirection: "row",
                    width: `60%`,
                    justifyContent: "space-between"
                }}>
                    <Text children={route.params.title}
                          style={{
                              fontSize: 14,
                              fontWeight: "700"
                          }}/>
                    <Text children={route.params.price + "p"}
                          style={{
                              color: `#EE7100`,
                              fontSize: 14,
                              fontWeight: "700"
                          }}/>
                </View>
                <View style={{
                    flexDirection: "row",
                    width: `77%`,
                    marginTop: 8,
                    justifyContent: "space-between",
                    alignItems: "flex-end"
                }}>
                    <TouchableOpacity children={<Text children={`Добавить в корзину`}
                                                      style={{
                                                          color: "#FFF",
                                                          fontSize: 11,
                                                          fontWeight: "600"
                                                      }}/>}
                                      style={{
                                          backgroundColor: `#EE7100`,
                                          paddingHorizontal: 13,
                                          paddingVertical: 4,
                                          borderRadius: 4
                                      }}/>
                    <TouchableOpacity children={<Text children={"Подробнее о модели"}
                                                      style={{
                                                          color: `#EE7100`,
                                                          textDecorationLine: "underline",
                                                          fontSize: 13,
                                                          fontWeight: "600"
                                                      }}/>}/>
                </View>
            </View>

            <View style={{
                ...style.title,
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomLeftRadius: 15,
                borderBottomRightRadius: 15,
                minHeight: 140
            }}>
                <Text children={`Описание`}
                      style={style.headerText}/>
                <Text children={route.params.description}/>
            </View>

            <View style={{...style.title, height: 300}}>
                <View style={{flexDirection: "column"}}>

                    <Text children={`Отзывы о товаре`}
                          style={style.headerText}/>

                    <View style={{flexDirection: "row", alignItems: "baseline", justifyContent: "space-between"}}>

                        <View children={
                            [0, 0, 0, 0, 0].map((item: number, index: number) => <Icon size={24}
                                                            key={index}
                                                            source={`star`}
                                                            color={`#ffd314`}/>)}
                              style={{
                                  flexDirection: "row"
                              }}/>
                        <TouchableOpacity children={<Text children={`Все отзывы`}
                                                          style={{...style.headerText, fontSize: 15}}/>}/>
                    </View>
                    <Divider style={{backgroundColor: `#EE7100`, marginBottom: 8}}/>
                    <View>
                        <Avatar.Text label={`${route.params.feedback.rating}/5`}
                                     labelStyle={{
                                         color: "#FFF",
                                         fontSize: 15,
                                         fontWeight: `700`
                                     }}
                                     style={{
                                         backgroundColor: `#EE7100`,
                                         borderRadius: 8
                                     }}/>
                        <View>
                        </View>
                    </View>
                    <FeedbackList feedback={route.params.feedback.comments}/>
                </View>
            </View>
        </ScrollView>
    );
};

const style = StyleSheet.create({
    container: {
        flexGrow: 1,
        backgroundColor: "#FFF"
    },
    title: {
        flexDirection: "column",
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15,
        paddingVertical: 10,
        paddingHorizontal: 20,
        marginVertical: 20,
        borderStyle: "solid",
        backgroundColor: "#FFF",
        shadowOffset: {width: -2, height: 4},
        shadowColor: '#171717',
        shadowOpacity: 0.2,
        shadowRadius: 3,
        elevation: 7,
    },
    headerText: {
        color: `#EE7100`,
        fontSize: 17,
        fontWeight: "700",
        marginBottom: 9
    }
});